<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="styles.css"/>
		<script type='text/javascript' src='jquery-min.js'></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#btnLogin").click(function(){
					var username = document.getElementById("txtUsername").value;
					var pwd = document.getElementById("txtPassword").value;
					if(username.length <= 0){
						alert("Username cannot be blank");
						return false;
					}
					$.ajax({
						url:"backend/user.php",
						cache:false,
						type:'POST',
						data:{ACTION:'LOGIN',txtUsername:username,txtPassword:pwd},
						success:function(responseText){
							var rs = $.parseJSON(responseText);
							//alert(rs.status);
							$('#div_login').fadeOut();
							$('#div_user_pane').fadeIn();
						}
					});
					//$("#frmLogin").submit();
					return false;
				});
				
				$("#btnReg").click(function(){
					window.location.replace("reg.php");
					/*
						OR we can use
						window.location.href = "";
					*/
				});
				
				$("#btnLogout").click(function(){
					$.ajax({
						url:"backend/user.php",
						cache:false,
						type:'POST',
						data:{ACTION:'LOGOUT'},
						success:function(responseText){
							//alert(responseText);
							var rs = $.parseJSON(responseText);
							$('#div_user_pane').fadeOut();
							$('#div_login').fadeIn();
						}
					});
					return false;
				});
			});
			
		</script>
		
		<title>VTech blog - A technical blog</title>
	</head>
	<body>
		<div id="container">
			<div id="div_header">
				<?php session_start();
					if( !isset($_SESSION["loggedUser"]) || $_SESSION["loggedUser"]==null){ ?>
				<div id="div_login">
					<form id="frmLogin" name="frmLogin" method="post" action="backend/user.php">
						<div style="clear:both;width:100%">
							<input type="hidden" name="ACTION" value="LOGIN" /> 
							<input style="width:95%;margin: 5px 5px;" type="text" id="txtUsername" name="txtUsername" value="" />
						</div>
						<div style="clear:both;width:100%">
							<input style="width:95%;margin: 0px 5px;" type="password" id="txtPassword" name="txtPassword" value="" />
						</div>
						<div style="clear:both;text-align:center;">
							<input type="button" id="btnLogin" name="btnLogin" value="Login" /> or <input type="button" id="btnReg" value="Register"/>
						</div>
					</form>
				</div>
				<?php }else{ ?>
					<div id="div_user_pane">
						Xin chao <a href="#"><?php echo $_SESSION["loggedUser"]; ?></a>
						<a href="#" id="btnLogout">Thoat</a>
					</div>
				<?php } ?>
			</div>
			<div id="div_nav" class="menu">
				<?php include "nav_bar.php" ?>
			</div>
			<div id="div_main">
				<div>
					<img width="120px" height="100px" src="images/av_avatar.jpg"></img>
				</div>
				<div>
					<p>Hi there, I'm very glad you are here. This blog is built to share knowledge together with people who just like me: In love with programming and computer science.</p>
				</div>
			</div>
			<div id="div_footer" >Copyright 2013 @Dao Anh Vu</div>
		</div>
	</body>
</html>
